<template>
<!--  todo 没写完-->

  <a-drawer
    destroyOnClose
    :title="record.purchaseNub"
    :width="width"
    :closable="false"
    @close="onClose"
    :visible="visible"
    class="ene-w-h-d"
  >
    <a-row class="top-row">
      <template v-for="item in topData">
        <a-col :lg="item.lg?item.lg:4" :md="12" :sm="24" >
        <a-form-item :colon="false" :label="item.name" >
          <slot  :name="item.key"  :text="item.value" :record="record">
            <span >{{ item.value }}</span>
          </slot>

        </a-form-item>
        </a-col>
      </template>
    </a-row>
    <a-tabs defaultActiveKey="0" @change="handleChange">
      <template v-for="(item,index) in tabsData">
        <a-tab-pane  :tab="item.title" :key="index+''" :forceRender="true">
            <slot :name="'tabs-'+index"></slot>
        </a-tab-pane>
      </template>
    </a-tabs>

  </a-drawer>
</template>
<script>
import {JVXETypes} from "@comp/jeecg/JVxeTable";
import {getAction, postAction} from "@api/manage";

const columns = [
  {
    title: '库位名称',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '前缀',
    dataIndex: 'prefix',
  },
  {
    title: '货架号',
    dataIndex: 'shelfNub',
  },
  {
    title: '层号',
    dataIndex: 'layersNub',
    width: "260px",
  },
  {
    title: '货位号',
    dataIndex: 'positionNub',

  },
  /*  {
      title: '操作',
      key: 'action',
      scopedSlots: {customRender: 'action'},
    },*/
]
const dataSource = [
  {
    id:1,
    name: 'TEST',
    prefix:"A",
    layersNub:'',
    positionNub:'',
    huojiaNub:''
  }
]

export default {
  props: {
    width:{
      type:Number,
      require: true,
      default: 1200,
    },




  },

  data() {
    return {
      record:[],
      visible:false,
      tabsData:[],
      topData:[],
      url:{
        queryEneWarehouseLocation:'/ene/eneWarehouse/queryEneWarehouseLocation',
        delEneWarehouseLocation:'/ene/eneWarehouse/delEneWarehouseLocation'
      },
      dataSourceCopy:[],
      dataSource,
      columns,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19},
      },
    }
  },

  methods: {
    onSearch(value){
      if(value==""||value==null){
        this.dataSource=[...this.dataSourceCopy]
      }else{
        this.dataSource=this.dataSourceCopy.filter(e=>{
          return value==e.prefix||value==e.shelfNub||value==`${e.prefix}-${e.shelfNub}-${e.layersNub}-${e.positionNub}`
        })
      }

    },

    handleChange(value){
      console.log("changetabs")
        this.$emit('changeTabs',value)
    },

    onClose() {
      this.visible = false
    }
  }
}
</script>
<style scoped>
.top-row {
  background: #F4F5F7;
  padding: 12px 24px;

}

.top-row /deep/ .ant-form-item {
  margin-bottom: 0;
  color: #6B778C
}

.top-row /deep/ .ant-form-item-label {
  line-height: 1;
}

.top-row /deep/ .ant-form-item-control {
  line-height: 1;
  margin-top: 10px;
}

.top-row /deep/ .ant-form-item-label > label {
  color: #6B778C
}

.basic-info-box, .system-info-box {
  padding: 20px 0;
}

.basic-info-box /deep/ .ant-form-item, .system-info-box /deep/ .ant-form-item {
  margin-bottom: 20px;
}

.basic-info-box /deep/ .ant-form-item-label > label {
  color: #172B4D;
}

.ene-w-h-d /deep/ .ant-collapse-borderless > .ant-collapse-item {
  border: none;
}

.ene-w-h-d /deep/ .ant-collapse-header {
  background: #F4F5F7;
}

.ene-w-h-d /deep/ .ant-collapse {
  background: transparent;
}

.ene-w-h-d /deep/ .ant-input[disabled] {
  background: #ebecf0
}

.ene-w-h-d /deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0
}
</style>